<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card class="card">
          <Detail title="总阅读量"
                  :flag="flag"
                  :count="totalViewed">
            <template slot="charts">
              <div>

              </div>

            </template>

          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="总访问量"
                  :count="totalViewed"
                  :flag="flag">
            <template slot="charts">
              <LineChart></LineChart>
            </template>
            <template slot="footer">

            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="设备名称"
                  :device="wxuser.deviceName?wxuser.deviceName:'设备未绑定'">
            <template slot="content">
            </template>

          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="设备状态"
                  :device="wxuser.deviceStatus?'在线':'离线'">
            <template slot="content">
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "./Detail";
// 引入折线图组件
import LineChart from "./LineChart"
// 引入柱状图组件
import BarChart from "./BarChart"
import ProgressChart from "./ProgressChart"
// 引入获取用户id
import { getUid } from "@/utils/auth.js"
export default {
  props: {},
  components: {
    Detail,
    LineChart,
    BarChart,
    ProgressChart
  },
  data () {
    return {
      totalViewed: 0,
      wxuser: {},
      flag: false
    };
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.getTotalViewed()
    this.getDeviceNameAndStatus()
  },
  methods: {
    async getTotalViewed () {
      const res = await this.$API.chart.totalViewed()
      console.log('total', res);
      if (res.status == 200) {
        this.totalViewed = res.data
        this.flag = true
      }
    },
    async getDeviceNameAndStatus () {
      let uid = getUid()
      const res = await this.$API.chart.getWxUser(uid)
      console.log('wxuser', res)
      if (!res) {
        this.$bus.$emit('sensorStatus', false)
        return this.$message.error("微信未绑定")
      }
      if (res.status == 200) {
        this.$bus.$emit("sensorId", res.data.id)
        this.$bus.$emit("sensorStatus", true)
        this.wxuser = res.data
      } else {
        this.$bus.$emit("sensorStatus", false)
        this.$message.error('设备未绑定')
      }
    }
  },
};
</script>

<style scoped>
.card {
  margin-bottom: 10px;
}
</style>
